<template>
	<view class="mineBox">
		<view class="bgk">
			<image src="../../static/images/2.jpg"></image>
		</view>
		<view :style="{'height':titleTops+'px'}"></view>
		<view class="titleText" :style="{'height':titleHeight+'px','lineHeight':titleHeight+'px'}">
			个人中心
		</view>
		<view class="contentBox">
			<view class="authBox">
				<view class="imgBox">
					<image :src="userInfo.avatar" mode=""></image>
				</view>
				<view class="personInfo">
					<view class="nickText">
						{{userInfo.nickname}}
					</view>
					<view class="nameText">
						{{userInfo.mobile}} <text>|</text> {{userInfo.areaname?userInfo.areaname:''}}
					</view>
				</view>
			</view>
			<view class="cardBox">
				<!-- <view class="cardItem" v-for="(i,index) of cardItemInfo" :key="index" @click="shareGoDetail(i.goPage,i.name)">
                    <block v-if="index==1">
                        
                           <image v-if="userInfo.group_id==2" :src="i.imgUrl" mode=""></image>
                           <text v-if="userInfo.group_id==2">{{i.name}}</text> 
                    </block>
                    <button v-else-if="index==3" open-type="contact" @contact="contact" style="font-size: 24rpx; color: #333333;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    " >
                        <image style="margin-bottom: 10rpx;" :src="i.imgUrl" mode=""></image>
                        <text>{{i.name}}</text>
                    </button>
                    
                    <block v-else>
                            <image :src="i.imgUrl" mode=""></image>
                            <text>{{i.name}}</text>
                    </block>
                   
				
				</view> -->
                <view class="cardItem"  @click="shareGoDetail('/pages/tabbar/myOrder','我的订单')">
                     <image src="../../static/images/h1.png" mode="widthFix"></image>
                     <text>我的订单</text>
                </view>
               <view class="cardItem" v-if="userInfo.group_id=='2'" @click="shareGoDetail('/pages/serviceOrder/index','业务订单')">
                    <image src="../../static/images/h1.png" mode="widthFix"></image>
                    <text>业务订单</text>
                </view>
                <view class="cardItem"  @click="shareGoDetail('/pages/mine/personalInfo','个人信息')">
                     <image src="../../static/images/h2.png" mode="widthFix"></image>
                     <text>个人信息</text>
                </view>
                <view class="cardItem"  @click="shareGoDetail('/pages/mine/invoiceServe','个人信息')">
                     <image src="../../static/images/h3.png" mode="widthFix"></image>
                     <text>发票服务</text>
                </view>
                <view class="cardItem" >
                    <button  open-type="contact" @contact="contact" style="font-size: 24rpx; color: #333333;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    " >
                     <image src="../../static/images/h4.png"  mode="widthFix"></image>
                     <text style="line-height: 34rpx;font-size: 28rpx;">联系客服</text>
                     </button>
                </view>
                <view class="cardItem"  @click="shareGoDetail('/pages/mine/messageInfo','个人信息')">
                     <image src="../../static/images/h5.png" mode="widthFix"></image>
                     <text>消息通知</text>
                </view>
			</view>
            
			<view class="shareCard">
				<view class="shareItem" v-for="(i,index) of shareInfo" :key="index" @click="shareGoDetail(i.goPage,i.name)">
					<view class="leftItem">
						<image :src="i.imgUrl" mode=""></image>
						<text>{{i.name}}</text>
					</view>
					<view class="">
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleHeight:'',
				titleTops:'',
				cardItemInfo:[
					{
						imgUrl:require('../../static/images/h1.png'),
						name:"我的订单",
						goPage:"/pages/tabbar/myOrder",
                        type:'switchTab'
					},
                       {
                        imgUrl:require('../../static/images/h1.png'),
                        name:"业务订单",
                        goPage:"/pages/serviceOrder/index",
                           
                       },
					{
						imgUrl:require("../../static/images/h2.png"),
						name:"个人信息",
						goPage:"/pages/mine/personalInfo"
					},
					{
						imgUrl:require("../../static/images/h3.png"),
						name:"发票服务",
						goPage:"/pages/mine/invoiceServe"
					},
					{
						imgUrl:require("../../static/images/h4.png"),
						name:"联系客服",
						goPage:""
					},
					{
						imgUrl:require("../../static/images/h5.png"),
						name:"消息通知",
						goPage:"/pages/mine/messageInfo"
					},
				],
				shareInfo:[
					{
						imgUrl:require('../../static/images/e1.png'),
						name:"关于我们",
						goPage:"/pages/about/index?id=47"
					},
					{
						imgUrl:require('../../static/images/e2.png'),
						name:"常见问题",
						goPage:"/pages/mine/commonProblem"
					},
					{
						imgUrl:require('../../static/images/e3.png'),
						name:"投诉建议",
						goPage:"/pages/mine/complain"
					},
					{
						imgUrl:require('../../static/images/e4.png'),
						name:"服务协议",
						goPage:"/pages/about/index?id=48"
					},
					{
						imgUrl:require('../../static/images/e5.png'),
						name:"隐私政策",
						goPage:"/pages/about/index?id=49"
					},
					{
						imgUrl:require('../../static/images/e6.png'),
						name:"分享给好友",
						goPage:""
					},
				],
				userInfo:{}
			}
		},
		onReady() {
			// #ifdef MP
				uni.getSystemInfo({
					success: (e) => {
						this.titleTops = e.statusBarHeight;
						let custom = uni.getMenuButtonBoundingClientRect();
						this.titleHeight = custom.height + (custom.top - e.statusBarHeight) * 2;
					}
				})
			// #endif
			
		},
        onShow() {
          this.getUserInfo()  
        },
		methods:{
                
            async getUserInfo(){
             const {data} =  await this.$api.userinfo()
             this.userInfo= data
            },
			//跳往常见问题页面
			shareGoDetail(pageUrl,name){
				if(name=='我的订单'){
					uni.switchTab({
						url:pageUrl
					})
                    return
				}
				
				uni.navigateTo({
					url:pageUrl
				})
			}
		}
	}
</script>

<style scoped lang="scss">
  .mineBox{
	  position: relative;
	  .bgk{
		  position: absolute;
		  top: 0rpx;
		  left: 0rpx;
		  image{
			  width: 750rpx;
			  height: 424rpx;
		  }
	  }
	  .titleText{
		  position: relative;
		  z-index: 22;
		  text-align: center;
		  font-size: 32rpx;
		  color: #FFFFFF;
	  }
	  .contentBox{
		  position: relative;
		  z-index: 22;
		  .authBox{
			  margin-left: 33rpx;
			   // margin-top: 30rpx;
			  display: flex;
			  .imgBox{
				  width: 128rpx;
				  height: 128rpx;
				  border-radius: 50%;
				  overflow: hidden;
				  image{
					  width: 128rpx;
					  height: 128rpx;
				  }
			  }
			  .personInfo{
				  margin-left: 15rpx;
				  .nickText{
					  font-size: 32rpx;
					  color: #FFFEFE;
					  font-weight: 600;
					  margin: 15rpx 0rpx 10rpx 0rpx;
				  }
				  .nameText{
					  font-size: 30rpx;
					  color: #FFFEFE;
					  text{
						  position: relative;
						  top:-4rpx;
						  margin: 0rpx 8rpx 0rpx;
					  }
				  }
			  }
		  }
		  .cardBox{
			  width: 711rpx;
			  // height: 307rpx;
			  padding: 40rpx ;
			  background: #FFFFFF;
			  border-radius: 15rpx;
			  margin: 0 auto;
			  margin-top: 40rpx;
			  display: flex;
			  // justify-content: space-between;
			  flex-wrap: wrap;
			  .cardItem{
				  width: 25%;
				  display: flex;
				  flex-direction: column;
				  align-items: center;
				  font-size: 28rpx;
				  color: #333333;
				  image{
					  width: 50rpx;
					  height: 44rpx;
					  margin: 20rpx 0 10rpx;
				  }
			  }
		  }
		  .shareCard{
			  width: 710rpx;
			  background: #FFFFFF;
			  border-radius: 12rpx;
			  margin: 21rpx auto;
			  padding: 0rpx 26rpx;
			  .shareItem{
				  display: flex;
				  justify-content: space-between;
				  height: 100rpx;
				  align-items: center;
				  border-bottom: 1px solid #E4E4E4;
				  &:last-child{
					  border:none;
				  }
				  .leftItem{
					  display: flex;
					  align-items: center;
					  font-size: 30rpx;
					  color: #555555;
					  image{
						 width: 34rpx;
						 height: 34rpx;
						 margin-right: 21rpx;
					  }
				  }
			  }
		  }
	  }
  }
</style>
